<!--
 * @Description: 
 * @Author: yunChuangShiTai
 * @Date: 2024-01-11 14:48:18
 * @LastEditTime: 2024-01-31 15:57:56
 * @LastEditors: yunChuangShiTai
-->
<template>
  <el-dialog
    :model-value="props.show"
    :show-close="false"
    class="myDialogClass"
    draggable
  >
    <template #header="{ close }">
      <div class="my-header">
        <div class="title">点位移</div>
        <!-- <h4 :id="titleId">This is a custom header!</h4> -->
        <div class="close" @click="close">
          <el-icon size="22px" color="#fff"><Close /></el-icon>
        </div>
      </div>
    </template>

    <candlestick v-if="props.show"></candlestick>

    <!-- <template #footer>
      <span>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 确定 </el-button>
      </span>
    </template> -->
  </el-dialog>
</template>

<script setup name="Index">
import { onMounted } from "vue";
import candlestick from "@/components/Echarts/candlestick";
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  type: {
    type: Boolean,
    default: false,
  },
});
const { proxy } = getCurrentInstance();
const emit = defineEmits();

const tabsName = ref(1);

const baseForm = ref(null);

const rules = reactive({
  name: [
    {
      required: true,
      message: "必须填写",
      trigger: "blur",
    },
  ],
  displayName: [
    {
      required: true,
      message: "必须填写",
      trigger: "blur",
    },
  ],
});

const handleClose = () => {
  emit("close", false);
};

const onSubmit = () => {
  console.log("addFrom", addForm.value);
  // console.log("formInline,", props.formInline);
  // emit("formClick");
  baseForm.value.validate((valid) => {
    if (!valid) {
      return false;
    }
    handleClose();
    emit("addForm", addForm.value);
  });
};

onMounted(() => {});
</script>


<style  lang="scss">
/*scoped 模式下  background-color 不生效 直接写到style*/
.myDialogClass {
  border-radius: 5px;

  // background-color: #58d0ff !important;
  .el-dialog__header {
    padding: 0;
    margin-right: 0;
    padding-bottom: 0;
    border-radius: 5px;
    margin-top: 150px;
  }
}

.my-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: #56a3f0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  .title {
    font-size: 18px;
    color: #fff;
    padding: 0 10px;
    font-weight: bold;
  }
  .close {
    padding: 6px 12px;
    // margin-right: 10px;
    border-top-right-radius: 5px;
    background-color: #acaaaa73;
  }
  .close:hover {
    padding: 6px 12px;
    border-top-right-radius: 5px;
    background-color: #81818173;
    cursor: default;
  }
}
</style>

